<template>
	<view class="container">
		<!-- 按钮 -->
		<button @click="showParticles(true)">显示金色粒子效果</button>
		<button @click="showParticles(false)">显示红色破碎效果</button>

		<!-- 粒子容器 -->
		<view class="particles-container">
			<view v-for="(particle, index) in particles" :key="index" class="particle"
				:class="{ broken: !particle.success }" :style="getParticleStyle(particle)"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Particles',
		data() {
			return {
				particles: [], // 存储所有当前活跃的粒子
				particleId: 0, // 唯一标识符（用于 key）
			};
		},
		methods: {
			/**
			 * 显示粒子动画
			 * @param {boolean} isSuccess - true: 金色漂浮; false: 红色破碎
			 */
			showParticles(isSuccess) {
				
				// 获取屏幕中心坐标
				const systemInfo = uni.getSystemInfoSync();
				const centerX = systemInfo.windowWidth / 2;
				const centerY = systemInfo.windowHeight / 2;

				// 创建 30 个粒子
				for (let i = 0; i < 30; i++) {
					// 随机方向和距离
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 100 + 50;
					const tx = Math.cos(angle) * distance;
					const ty = Math.sin(angle) * distance;

					// 随机大小
					const size = Math.random() * 8 + 4;

					// 随机延迟
					const delay = Math.random() * 0.5;

					// 动画持续时间
					const duration = isSuccess ? 3000 : 1000;

					// 创建粒子对象
					const particle = {
						id: this.particleId++,
						success: isSuccess,
						startX: centerX,
						startY: centerY,
						tx: tx,
						ty: ty,
						size: size,
						delay: delay,
						duration: duration,
					};

					// 添加到数组
					this.particles.push(particle);

					// 定时移除（动画结束后）
					setTimeout(() => {
						this.particles = this.particles.filter(p => p.id !== particle.id);
					}, duration + delay * 1000 + 50); // 多加 50ms 安全缓冲
				}
			},

			/**
			 * 动态生成粒子样式
			 * @param {Object} p - 粒子对象
			 * @returns {Object} 样式对象
			 */
			getParticleStyle(p) {
				return {
					width: p.size + 'px',
					height: p.size + 'px',
					left: p.startX + 'px',
					top: p.startY + 'px',
					'--tx': p.tx + 'px',
					'--ty': p.ty + 'px',
					'animation-delay': p.delay + 's',
					'animation-duration': (p.duration / 1000) + 's'
				};
			}
		},
		mounted() {
			console.log('粒子页面已加载，支持小程序/H5/App');
		}
	};
</script>

<style scoped>
	.container {
		position: relative;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
		overflow: hidden;
	}

	button {
		margin: 10px;
		padding: 12px 24px;
		font-size: 16px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 8px;
		z-index: 10;
	}

	/* 粒子容器：覆盖全屏，指针穿透 */
	.particles-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* 不阻挡点击 */
		z-index: 9999;
	}

	/* 通用粒子样式 */
	.particle {
		position: absolute;
		border-radius: 50%;
		background: gold;
		pointer-events: none;
		animation: float 3s ease-out forwards;
	}

	.particle.broken {
		background: red;
		border-radius: 0;
		/* 方形更像碎片 */
		animation: break 1s ease-out forwards;
	}

	/* 漂浮动画（金色） */
	@keyframes float {
		0% {
			transform: translate(0, 0) scale(1);
			opacity: 1;
		}

		100% {
			transform: translate(var(--tx), var(--ty)) scale(0);
			opacity: 0;
		}
	}

	/* 破碎动画（红色） */
	@keyframes break {
		0% {
			transform: translate(0, 0) rotate(0deg);
			opacity: 1;
		}

		100% {
			transform: translate(var(--tx), var(--ty)) rotate(360deg);
			opacity: 0;
		}
	}
</style>